<template lang="html">
  <div class="footer-wrap">
    <div class="footer-link">
      <a target="_blank" href="http://lbs.amap.com/">高德开发平台</a>
      <a target="_blank" href="http://116.196.85.82:2000/swagger-ui.html">Sma2lbao 用户api</a>
      <a target="_blank" href="http://116.196.85.82:2001/swagger-ui.html">Sma2lbao 博客api</a>
      <a target="_blank" href="http://116.196.85.82:2002/swagger-ui.html">Sma2lbao 音乐api</a>
      <a target="_blank" href="http://sma2lbao.gitee.io/">关于我</a>
    </div>
    <div class="footer-tool">
      <Button size="large" type="ghost" shape="circle" icon="social-github" @click="handleGithub"></Button>
      <Button size="large" type="ghost" shape="circle" icon="ios-email" @click="handleEmail"></Button>
      <Button size="large" type="ghost" shape="circle" icon="android-chat" @click="handleChat"></Button>
    </div>
    <p class="footer-copyright">2018-2018 &copy; Sma2lBao</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleChat () {
      window.open('http://wpa.qq.com/msgrd?v=3&uin=664413073&site=qq&menu=yes', '_blank')
    },
    handleEmail () {
      window.open('Mailto:sma2lbao@qq.com')
    },
    handleGithub () {
      window.open('https://github.com/sma2lbao/', '_blank')
    }
  }
}
</script>

<style lang="css" scoped>
.footer-wrap {
  padding: 20px 0;
}
.footer-tool {
  margin: 15px auto;
}
.footer-tool button {
  color: #fff;
  margin: 0 5px;
}
.footer-tool button:hover {
  color: #57a3f3;
}
.footer-link a{
  color: #ddd;
  margin: 0 8px;
  font-size: 13px;
}
.footer-link a:hover {
  text-decoration: underline;
}
.footer-copyright {
  color: #ddd;
  font-size: 13px;
}
</style>
